<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI工作台 - 汇问</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #3259CE;
            --primary-light: #4A76F5;
            --secondary: #6C757D;
            --light: #F8F9FA;
            --dark: #212529;
            --success: #28A745;
            --warning: #FFC107;
            --danger: #DC3545;
            --border-radius: 12px;
            --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: var(--dark);
            min-height: 100vh;
            display: flex;
            overflow-x: hidden;
        }

        /* 侧边栏样式 */
        .nav {
            width: 260px;
            height: 100vh;
            background: linear-gradient(180deg, var(--primary) 0%, #1e3a8a 100%);
            color: white;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            display: flex;
            flex-direction: column;
            transition: var(--transition);
            box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
        }

        .nav.collapsed {
            width: 80px;
        }

        .nav.collapsed .logo p,
        .nav.collapsed .content a span,
        .nav.collapsed .manage a span,
        .nav.collapsed .exit p {
            display: none;
        }

        .nav.collapsed .logo,
        .nav.collapsed .content div,
        .nav.collapsed .manage,
        .nav.collapsed .exit {
            justify-content: center;
            padding-left: 0;
        }

        .logo {
            padding: 25px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
        }

        .logo img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: white;
            padding: 5px;
        }

        .logo p {
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .toggle-btn {
            position: absolute;
            top: 30px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .toggle-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(180deg);
        }

        .content {
            padding: 30px 0;
            flex: 1;
        }

        .content div {
            padding: 15px 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: var(--transition);
            margin: 5px 15px;
            border-radius: 10px;
        }

        .content div:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .content div.active {
            background: rgba(255, 255, 255, 0.25);
        }

        .content svg {
            width: 24px;
            height: 24px;
        }

        .content a {
            color: white;
            text-decoration: none;
            font-size: 17px;
            display: flex;
            align-items: center;
            gap: 15px;
            width: 100%;
        }

        .content i {
            font-size: 20px;
            width: 24px;
            text-align: center;
        }

        .manage, .exit {
            padding: 15px 25px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: var(--transition);
            margin: 5px 15px;
            border-radius: 10px;
        }

        .manage:hover, .exit:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .manage i, .exit i {
            font-size: 20px;
            width: 24px;
            text-align: center;
        }

        .manage a, .exit p {
            color: white;
            text-decoration: none;
            font-size: 17px;
        }

        .exit {
            margin-top: auto;
            margin-bottom: 20px;
            color: #ff9b9b;
        }

        /* 主内容区样式 */
        .main-content {
            flex: 1;
            margin-left: 260px;
            padding: 30px;
            transition: var(--transition);
        }

        .nav.collapsed ~ .main-content {
            margin-left: 80px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 32px;
            color: var(--primary);
            font-weight: 700;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: white;
            padding: 10px 20px;
            border-radius: 50px;
            box-shadow: var(--shadow);
        }

        .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .user-info p {
            font-weight: 500;
        }

        /* 工作流区域 */
        .workflow {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            margin-bottom: 40px;
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 25px;
            transition: var(--transition);
            flex: 1;
            min-width: 250px;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            color: var(--primary);
            font-size: 20px;
            font-weight: 600;
        }

        .card-title i {
            font-size: 24px;
        }

        .input-area textarea {
            width: 100%;
            height: 200px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            resize: vertical;
            transition: var(--transition);
        }

        .input-area textarea:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(74, 118, 245, 0.15);
        }

        select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            background: white;
            margin-bottom: 15px;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
            transition: var(--transition);
        }

        select:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(74, 118, 245, 0.15);
        }

        .slider-container {
            margin-top: 15px;
        }

        .slider-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--secondary);
        }

        input[type="range"] {
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            outline: none;
            -webkit-appearance: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            transition: var(--transition);
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            background: var(--primary-light);
            transform: scale(1.1);
        }

        .output-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .output-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(50, 89, 206, 0.3);
        }

        .output-btn:active {
            transform: translateY(0);
        }

        /* 结果预览区 */
        .result-preview {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 30px;
            margin-top: 20px;
        }

        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }

        .result-header h2 {
            font-size: 24px;
            color: var(--primary);
        }

        .result-actions button {
            padding: 8px 15px;
            background: #e9ecef;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .result-actions button:hover {
            background: #dee2e6;
        }

        .result-content {
            min-height: 200px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px dashed #e0e0e0;
        }

        .result-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            color: var(--secondary);
        }

        .result-placeholder i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #ced4da;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .nav {
                width: 80px;
            }
            
            .nav:not(.collapsed) {
                width: 260px;
            }
            
            .main-content {
                margin-left: 80px;
            }
            
            .workflow {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .nav {
                width: 60px;
            }
            
            .nav:not(.collapsed) {
                width: 260px;
            }
            
            .main-content {
                margin-left: 60px;
                padding: 20px 15px;
            }
            
            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .user-info {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 576px) {
            .nav.collapsed ~ .main-content {
                margin-left: 60px;
            }
            
            .card {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边导航栏 -->
    <div class="nav">
        <div class="logo">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233259CE' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E" alt="汇问AI">
            <p>汇问AI</p>
        </div>
        <button class="toggle-btn">
            <i class="fas fa-chevron-left"></i>
        </button>
        
        <div class="content">
            <div>
                <a href="/search">
                    <i class="fas fa-search"></i>
                    <span>AI智能搜索</span>
                </a>
            </div>
            <div>
                <a href="/classification">
                    <i class="fas fa-th-large"></i>
                    <span>AI工具分类</span>
                </a>
            </div>
            <div class="active">
                <a href="/workbench">
                    <i class="fas fa-desktop"></i>
                    <span>AI工作台</span>
                </a>
            </div>
            <div>
                <a href="/feedback">
                    <i class="fas fa-comment-dots"></i>
                    <span>用户反馈</span>
                </a>
            </div>
        </div>
        
        <div class="manage">
            <i class="fas fa-cog"></i>
            <a href="#"><span>系统管理</span></a>
        </div>
        
        <div class="exit">
            <i class="fas fa-sign-out-alt"></i>
            <p>退出登录</p>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content">
        <div class="header">
            <h1><i class="fas fa-desktop"></i> AI 工作台</h1>
            <div class="user-info">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233259CE' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E" alt="用户头像">
                <p>管理员</p>
            </div>
        </div>
        
        <div class="workflow">
            <div class="card input-area">
                <div class="card-title">
                    <i class="fas fa-keyboard"></i>
                    <h3>输入内容</h3>
                </div>
                <textarea placeholder="请输入要处理的内容..."></textarea>
            </div>
            
            <div class="card">
                <div class="card-title">
                    <i class="fas fa-cogs"></i>
                    <h3>处理模型</h3>
                </div>
                <p>步骤一：选择模型</p>
                <select name="process" id="process">
                    <option value="deepseek-V3">DeepSeek-V3</option>
                    <option value="deepseek-R1" selected>DeepSeek-R1</option>
                    <option value="Mistral">Mistral</option>
                    <option value="Gemma-3n">Gemma-3n</option>
                    <option value="Llama-3">Llama-3</option>
                    <option value="Phi-4">Phi-4</option>
                    <option value="Qwen3">Qwen3</option>
                    <option value="Kimi">Kimi</option>
                </select>
            </div>
            
            <div class="card">
                <div class="card-title">
                    <i class="fas fa-image"></i>
                    <h3>图像处理</h3>
                </div>
                <p>步骤二：图像生成</p>
                <select name="photo" id="photo">
                    <option value="doubao">豆包</option>
                    <option value="dall-e">DALL·E 3</option>
                    <option value="midjourney">Midjourney</option>
                </select>
                
                <div class="slider-container">
                    <div class="slider-label">
                        <span>Seed</span>
                        <span id="seed-value">-1</span>
                    </div>
                    <input type="range" min="-1" max="4294967289" value="-1" step="1" id="seed-slider">
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">
                    <i class="fas fa-play-circle"></i>
                    <h3>执行处理</h3>
                </div>
                <p>生成最终结果</p>
                <button class="output-btn">
                    <i class="fas fa-play"></i> 执行处理
                </button>
            </div>
        </div>
        
        <div class="result-preview">
            <div class="result-header">
                <h2><i class="fas fa-file-alt"></i> 结果预览</h2>
                <div class="result-actions">
                    <button>
                        <i class="fas fa-download"></i> 导出
                    </button>
                </div>
            </div>
            <div class="result-content">
                <div class="result-placeholder">
                    <i class="fas fa-cloud"></i>
                    <p>处理结果将显示在这里</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏折叠/展开功能
        const toggleBtn = document.querySelector('.toggle-btn');
        const nav = document.querySelector('.nav');
        
        toggleBtn.addEventListener('click', () => {
            nav.classList.toggle('collapsed');
            const icon = toggleBtn.querySelector('i');
            if (nav.classList.contains('collapsed')) {
                icon.classList.remove('fa-chevron-left');
                icon.classList.add('fa-chevron-right');
            } else {
                icon.classList.remove('fa-chevron-right');
                icon.classList.add('fa-chevron-left');
            }
        });
        
        // Seed滑块功能
        const seedSlider = document.getElementById('seed-slider');
        const seedValue = document.getElementById('seed-value');
        
        seedSlider.addEventListener('input', () => {
            seedValue.textContent = seedSlider.value;
        });
        
        // 输出按钮功能
        const outputBtn = document.querySelector('.output-btn');
        const resultContent = document.querySelector('.result-content');
        const resultPlaceholder = document.querySelector('.result-placeholder');
        
        outputBtn.addEventListener('click', () => {
            resultPlaceholder.innerHTML = `
                <i class="fas fa-spinner fa-spin"></i>
                <p>正在处理中，请稍候...</p>
            `;
            
            // 模拟处理过程
            setTimeout(() => {
                resultPlaceholder.style.display = 'none';
                resultContent.innerHTML = `
                    <h3>处理结果</h3>
                    <p>AI模型已成功处理您的输入内容。根据您选择的DeepSeek-R1模型和豆包图像生成器，生成了以下结果：</p>
                    
                    <div style="display: flex; gap: 20px; margin-top: 20px;">
                        <div style="flex: 1; background: #e9f7ff; padding: 15px; border-radius: 8px;">
                            <h4><i class="fas fa-text-height"></i> 文本结果</h4>
                            <p>基于您的输入内容，AI生成了详细的分析报告。该报告涵盖了多个维度的分析，包括语义理解、情感分析和关键词提取等。</p>
                        </div>
                        <div style="flex: 1; background: #fff4e6; padding: 15px; border-radius: 8px;">
                            <h4><i class="fas fa-image"></i> 图像结果</h4>
                            <p>根据文本内容，已生成对应的视觉图像。图像大小为1024×1024像素，采用现代艺术风格呈现。</p>
                        </div>
                    </div>
                    
                    <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                        <h4><i class="fas fa-chart-line"></i> 性能指标</h4>
                        <p>处理时间: 2.3秒 | 资源消耗: 中等 | 准确率: 92%</p>
                    </div>
                `;
            }, 2000);
        });
        
        // 响应式调整
        window.addEventListener('resize', () => {
            if (window.innerWidth < 992) {
                nav.classList.add('collapsed');
                toggleBtn.querySelector('i').classList.remove('fa-chevron-left');
                toggleBtn.querySelector('i').classList.add('fa-chevron-right');
            } else {
                nav.classList.remove('collapsed');
                toggleBtn.querySelector('i').classList.remove('fa-chevron-right');
                toggleBtn.querySelector('i').classList.add('fa-chevron-left');
            }
        });
    </script>
</body>
</html>